<template>
	<up-dropdown-item :title="dropItemTitle">
		<view class="dropdown-content">
			<view
				v-for="item in data"
				:key="item.id"
				class="dropdown-item"
				:class="{ selected: selectItemIds.includes(item.id.toString()) }"
				@click="selectItem(item.id)"
			>
				<view class="mr-24 flex-1">{{ item.name }}</view>
				<image
					v-if="selectItemIds.includes(item.id.toString())"
					:src="imgBaseUrl + 'icon-check.png'"
					class="icon-40"
				/>
				<image v-else :src="imgBaseUrl + 'icon-uncheck.png'" class="icon-40" />
			</view>
			<!-- 底部按钮 -->
			<view class="bottom-bd-top p-24 flex">
				<zjy-button pd="60" type="line" @click="reset">重置</zjy-button>
				<view class="ml-18 flex-1">
					<zjy-button @click="submit">
						<text>确认筛选</text>
						<text v-if="selectLength">{{ selectLength }}个{{ title }}</text>
					</zjy-button>
				</view>
			</view>
		</view>
	</up-dropdown-item>
</template>
<script setup lang="ts">
const props = defineProps({
	modelValue: String,
	title: String,
	data: {
		type: Array as PropType<any[]>,
		default: () => [],
	},
})
const emit = defineEmits(["update:modelValue", "updateValue", "close"])
let defaultAllId = ""
watch(
	() => props.data,
	() => {
		defaultAllId = props.data.find((item) => item.all)?.id
	},
	{
		immediate: true,
	}
)
const selectItemIds = computed({
	get() {
		return props.modelValue ? props.modelValue?.split(",") : defaultAllId ? [defaultAllId] : []
	},
	set(newValue) {
		let values: string[] = []
		props.data.map((item: any) => {
			if (newValue.includes(item.id.toString())) {
				values.push(item.value)
			}
		})
		emit("update:modelValue", newValue.join(","))
		emit(
			"updateValue",
			values.filter((value) => value !== defaultAllId)
		)
	},
})
const imgBaseUrl = inject("imgBaseUrl")
const selectItem = (id: string) => {
	let newSelectIds = [...selectItemIds.value]
	let findIndex = selectItemIds.value.indexOf(id.toString())
	if (findIndex > -1) {
		if (!defaultAllId) {
			newSelectIds.splice(findIndex, 1)
		} else {
			if (id == defaultAllId) {
				//无法直接取消all
				return
			}
			newSelectIds.splice(findIndex, 1)
			if (newSelectIds.length == 0) {
				newSelectIds = [defaultAllId]
			}
		}
	} else {
		if (id == defaultAllId) {
			//选择all 取消其他选择
			newSelectIds = [defaultAllId]
		} else {
			//过滤掉all 再加入选中
			newSelectIds = newSelectIds.filter((scenicId) => scenicId != defaultAllId)
			newSelectIds.push(id.toString())
		}
	}
	selectItemIds.value = newSelectIds
}
//计算已选数量
const selectLength = computed(() => {
	return selectItemIds.value.filter((itemId) => itemId != defaultAllId).length
})
const dropItemTitle = computed(() => {
	if (selectItemIds.value.length > 1) {
		return "多选"
	}
	if (selectItemIds.value[0] == defaultAllId) {
		return props.title
	}
	let selectItemName = ""
	let findName = props.data.find((item: any) => item.id == selectItemIds.value[0])?.name
	if (findName) {
		selectItemName = findName
	}
	return selectItemName
})
//重置
const reset = () => {
	selectItemIds.value = []
	submit()
}
//确认
const submit = () => {
	emit("close")
}
</script>
<style lang="scss" scoped></style>
